<template>
  <div class="info-panel">
    <div class="item item-1">
      <div class="left"></div>
      <div class="right">
        <div class="desc-text">实时场内人数</div>
        <div class="desc-value">
          <div class="count">{{ ThousandWithNumber(output[0]) }}</div>
          <div class="downlaod-icon"></div>
        </div>
      </div>
    </div>
    <div class="item item-2">
      <div class="left"></div>
      <div class="right">
        <div class="desc-text">昨日未出场人数</div>
        <div class="desc-value">
          <div class="count">{{ ThousandWithNumber(output[1]) }}</div>
          <div class="downlaod-icon"></div>
        </div>
      </div>
    </div>
    <div class="item item-3">
      <div class="left"></div>
      <div class="right">
        <div class="desc-text">今日进场人次</div>
        <div class="desc-value">
          <div class="count">{{ ThousandWithNumber(output[2]) }}</div>
          <div class="downlaod-icon"></div>
        </div>
      </div>
    </div>
    <div class="item item-4">
      <div class="left"></div>
      <div class="right">
        <div class="desc-text">今日出场人次</div>
        <div class="desc-value">
          <div class="count">{{ ThousandWithNumber(output[3]) }}</div>
          <div class="downlaod-icon"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'

import { ThousandWithNumber } from '@/views/01/utils/help.js'

let input = ref([0, 0, 0, 0])

const output = useTransition(input, {
  duration: 1500,
  transition: TransitionPresets.easeInOutCubic
})

const fetchData = () => {
  input.value = [5144, 45, 10, 556]
}

onMounted(() => {
  setTimeout(() => {
    fetchData()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.info-panel {
  display: flex;
  // column-gap: 2.604167vw;
  // column-gap: 2.2vw;
  height: 5.729167vw;
  box-sizing: border-box;
  padding-left: 1.25vw;
  padding-right: 1.25vw;
  padding-top: 1.770833vw;

  margin-bottom: 1.5625vw;

  .item {
    flex: 1;
    flex-shrink: 0;

    display: flex;
  }

  .left {
    // width: 100%;
    width: 4.166667vw;
    height: auto;
    margin-right: 0.520833vw;
    background-color: pink;
  }
  .right {
    box-sizing: border-box;
    padding-top: 0.208333vw;
    padding-bottom: 0.625vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .desc-text {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.729167vw;
    line-height: 0.729167vw;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .desc-value {
    display: flex;
    align-items: flex-end;
  }

  .downlaod-icon {
    width: 14px;
    height: 14px;
    background-color: blue;
    margin-left: 0.416667vw;
  }

  .count {
    font-family:
      Alimama ShuHeiTi,
      Alimama ShuHeiTi;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: linear-gradient(90deg, #ffffff 0%, #98d4fa 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
